<template>
  <el-container style="height: 100%">
    <!-- 侧边栏 -->
    <el-aside width="250px" class="sidebar">
      <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/residents">居民信息</el-menu-item>
        <el-menu-item index="/houses">房屋信息</el-menu-item>
        <el-menu-item index="/properties">物业管理</el-menu-item>
        <el-menu-item index="/complaints">投诉建议</el-menu-item>
        <el-menu-item index="/activities">社区活动</el-menu-item>
        <el-menu-item index="/system">系统管理</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容区域 -->
    <el-main>
      <el-row class="content" justify="center" style="margin-top: 20px">
        <el-col :span="18">
          <el-card>
            <div class="header">
              <h3>房屋信息管理</h3>
              <el-button type="primary" @click="openAddDialog">添加房屋</el-button>
            </div>

            <el-table :data="houses" stripe>
              <el-table-column prop="id" label="ID" width="80"></el-table-column>
              <el-table-column prop="houseNumber" label="房屋编号" width="150"></el-table-column>
              <el-table-column prop="ownerName" label="房主姓名" width="150"></el-table-column>
              <el-table-column prop="status" label="房屋状态" width="100"></el-table-column>
              <el-table-column prop="address" label="地址" width="250"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button>
                  <el-button type="text" @click="deleteHouse(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 添加房屋弹窗 -->
            <el-dialog title="添加房屋" :visible.sync="addDialogVisible">
              <el-form :model="newHouse" ref="addForm">
                <el-form-item label="房屋编号" :label-width="'100px'">
                  <el-input v-model="newHouse.houseNumber" placeholder="请输入房屋编号"></el-input>
                </el-form-item>
                <el-form-item label="房主姓名" :label-width="'100px'">
                  <el-input v-model="newHouse.ownerName" placeholder="请输入房主姓名"></el-input>
                </el-form-item>
                <el-form-item label="房屋状态" :label-width="'100px'">
                  <el-input v-model="newHouse.status" placeholder="请输入房屋状态"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="'100px'">
                  <el-input v-model="newHouse.address" placeholder="请输入房屋地址"></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitNewHouse">确认</el-button>
              </div>
            </el-dialog>

            <!-- 编辑房屋弹窗 -->
            <el-dialog title="编辑房屋" :visible.sync="editDialogVisible">
              <el-form :model="currentHouse" ref="editForm">
                <el-form-item label="房屋编号" :label-width="'100px'">
                  <el-input
                    v-model="currentHouse.houseNumber"
                    placeholder="请输入房屋编号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="房主姓名" :label-width="'100px'">
                  <el-input
                    v-model="currentHouse.ownerName"
                    placeholder="请输入房主姓名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="房屋状态" :label-width="'100px'">
                  <el-input v-model="currentHouse.status" placeholder="请输入房屋状态"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="'100px'">
                  <el-input v-model="currentHouse.address" placeholder="请输入房屋地址"></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitEditHouse">确认</el-button>
              </div>
            </el-dialog>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  ElContainer,
  ElAside,
  ElMenu,
  ElMenuItem,
  ElMain,
  ElRow,
  ElCol,
  ElButton,
  ElCard,
  ElTable,
  ElTableColumn,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
} from 'element-plus'
import { getAllHouses, submitHouse, updateHouse, deleteHouse as del } from '@/utils/axios'

const activeMenu = ref('/houses')
const houses = ref([])
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const newHouse = ref({
  houseNumber: '',
  ownerName: '',
  status: '',
  address: '',
})
const currentHouse = ref({
  id: null,
  houseNumber: '',
  ownerName: '',
  status: '',
  address: '',
})

// 获取房屋信息
const loadHouses = async () => {
  const response = await getAllHouses()
  houses.value = response
}

// 打开添加房屋弹窗
const openAddDialog = () => {
  newHouse.value = {
    houseNumber: '',
    ownerName: '',
    status: '',
    address: '',
  }
  addDialogVisible.value = true
}

// 打开编辑房屋弹窗
const openEditDialog = (house) => {
  currentHouse.value = { ...house }
  editDialogVisible.value = true
}

// 提交新增房屋信息
const submitNewHouse = async () => {
  await submitHouse(newHouse.value)
  addDialogVisible.value = false
  loadHouses()
}

// 提交编辑房屋信息
const submitEditHouse = async () => {
  await updateHouse(currentHouse.value.id, currentHouse.value)
  editDialogVisible.value = false
  loadHouses()
}

// 删除房屋信息
const deleteHouse = async (id) => {
  await del(id)
  loadHouses()
}

onMounted(() => {
  loadHouses()
})
</script>

<style scoped>
.content {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.el-button {
  margin-left: 10px;
}

.el-dialog {
  width: 400px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>
